<template>
    <div class="account-logo">
        <div class="left mouse-active" @click="$router.push('/')">
            <el-image class="logo" :src="require('@/assets/img/account/logo.png')"></el-image>
            <span class="origin-title">合成生物学竞赛</span>
        </div>
        <!-- <el-image class="switch-language" @click="languageChange"
            :src="require(language == 'zh' ? '@/assets/img/account/switch-en.png' : '@/assets/img/account/switch-zh.png')"></el-image> -->
        <div class="switch-language mouse-active" @click="languageChange"
            :style="{ '--left': $i18n.locale === 'en' ? '0.11rem' : '1.62rem' }">
            <div class="language" :style="{ 'opacity': $i18n.locale === 'en' ? '0' : '1' }">En</div>
            <div class="language" :style="{ 'opacity': $i18n.locale === 'en' ? '1' : '0' }">中文</div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            timer: ""
        }
    },
    methods: {
        languageChange() {
            if (this.$i18n.locale === 'zh') {
                this.$i18n.locale = 'en'
                localStorage.setItem('my_locale', 'en')
            } else {
                this.$i18n.locale = 'zh'
                localStorage.setItem('my_locale', 'zh')
            }
            this.timer = setTimeout(() => {
                this.$router.go(0)
            }, 300);
        }
    },
    computed: {
        language() {
            return this.$i18n.locale
        },
    }
}
</script>


<style lang="less" scoped>
.account-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.71rem;

    .left {
        display: flex;
        align-items: center;

        .logo {
            width: 1.44rem;
            height: 1.25rem;
            margin-right: 0.21rem;
        }

        .origin-title {
            height: 1.44rem;
            font-size: 1.01rem;
            font-family: 'zcoolqingkehuangyouti-Regular', 'zcoolqingkehuangyouti';
            font-weight: 400;
            color: #212121;
            line-height: 1.44rem;
        }
    }

    .switch-language {
        position: relative;
        width: 2.67rem;
        height: 1.07rem;
        background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
        box-shadow: inset 0rem 0.11rem 0.19rem 0rem #7709CC;
        border-radius: 0.53rem;
        border: 0.03rem solid;
        border-image: linear-gradient(180deg, rgba(220, 235, 248, 1), rgba(119, 59, 137, 1)) 0.03 0.03;
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
    }

    .switch-language::before {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--left);
        transform: translateY(-50%) scale(1.5);
        width: 0.85rem;
        height: 0.85rem;
        background: url('@/assets/img/account/switch-box.png') no-repeat;
        background-size: cover;
        transition: left 0.3s;
    }

    .language {
        height: 0.96rem;
        font-size: 0.59rem;
        font-family: 'RNSSanzSC-Normal, RNSSanzSC';
        font-weight: 400;
        color: #FFFFFF;
        line-height: 0.96rem;
        position: absolute;
        transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    }

    .language:nth-of-type(1) {
        left: 0.58rem;
        opacity: 0;
    }

    .language:nth-of-type(2) {
        right: 0.3rem;
        opacity: 0;
    }
}
</style>